<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Calendar Test Page</title>
<script src="../lib/simple.js"></script>
<script src="../plugins/Calendar.js"></script>
<style>
.cal_table{
        font-size:11px;
    }
    .cal_table caption {
        text-align:left;
        font-size:13px;
        padding-left:1em;
    }
    a.cal_prev_year_btn,
    a.cal_next_year_btn,
    a.cal_prev_mon_btn,
    a.cal_next_mon_btn{
        padding:2px 3px;
        text-decoration:none;
        color:blue;
    }

    a.cal_next_year_btn{
        margin-right:20px;
    }

    .cal_thead{
        text-align:center;
        line-height:20px;
    }
    .cal_tbody a{
        display:-moz-inline-block;
        -moz-box-align:center;
        -moz-box-pack:center;
        display:inline-block;
        *display:inline;
        *zoom:1;
        width:15px;
        margin:1px;
        text-decoration:none;
        padding:3px;
        border:1px solid #ccc;
        color:#333;
        text-align:center;
    }
    .cal_tbody a.cal_today {
        border:1px solid #000;
    }
    .cal_tbody a.cal_after{
        color:#aaa;
    }
    .cal_tbody a.cal_selected{
        background:#69AB34;
        color:#fff;
    }
    .cal_tbody a:hover{
        background:#000;
        color:#fff;
    }
    .cal_custom{
        cursor:pointer;
        margin-left:20px;
    }
#calCnt {
border:1px solid #000;
background:#fff;
}
</style>
<script>
$(function () {
$('#calCnt').hide().css('position:absolute');
var cal = new $.Calendar('calCnt', {
	onChoose : function (d) {
		$('input').val(d);
		$('#calCnt').hide();
	},
	customCaption : '关闭',
	onCustomCaptionClick : function () {$('#calCnt').hide()}
});	
$('input').click(function (event) {
	$('#calCnt').css({
		left : event.pageX + 'px',
		top : event.pageY + 'px'	
	}).show();
});
});
</script>
<head>
<body>
<label>日期：<input type="text" style="width:300px"/></label>
<div id="calCnt"></div>
</body>
</html>
